<template>
  <div class="panel">
    <div class="header">
      <slot name="header-slot"></slot>
    </div>
    <div class="body">
      <slot name="body-slot"></slot>
    </div>
    <div class="footer">
      <slot name="footer-slot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'panel'
}
</script>

<style lang='scss'>
.panel{
    width: 100%;
    height: 100%;
    $panel_bg_color: skyblue;
    $header_height: 40px;
    $footer_height: 40px;
    .header{
        height: $header_height;
        background: $panel_bg_color;
        border-radius: 15px 15px 0 0;
        line-height: $header_height;
        font-weight: bold;
        text-align: center;
    }
    .body{
        height: calc(100% - 40px - 40px);
        background: whitesmoke;
        border: 1px solid whitesmoke;
        .toolbar{
          background: $panel_bg_color;
        }
    }
    .footer{
        height: $header_height;
        background: $panel_bg_color;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
    }
}
</style>
